<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	    *{
	    	margin: 0;
	    	padding: 0;
	    }
		#container{
			position: relative;
			width: 600px;
			height: 400px;
			border: 1px solid #000;
			margin: 0 auto;
			overflow: hidden;
		}
		#wrap{
			position: absolute;
			left: 0;
			width: 9999px;
			height: 400px;
			transition: all 2s;
		}
		#wrap div{
			text-align: center;
			line-height: 400px;
			font-size: 150px;
			color: #fff;
			float: left;
            width: 600px;
            height: 400px;
		}
		#slide1{
			background: deepskyblue;
		}
		#slide2{
			background: deeppink;
		}
		#slide3{
			background: greenyellow;
		}
		#slide4{
			background: lawngreen;
		}
		#list{
			position: absolute;
			bottom: 10px;
			left: 150px;
			width: 200px;
			height: 40px;
			display: flex;
			justify-content: space-between;
		}
		#list div{
			text-align: center;
			line-height: 30px;
			color: #fff;
			width: 30px;
			height: 30px;
            border-radius: 50%;
            background: rgba(80,180,79,0.5);
		}
		#left{
			position: absolute;
			left: 0;
			top: 200px;
		}
		#right{
			position: absolute;
			right: 0;
			top: 200px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="wrap">
			<div id="slide1">1</div>
			<div id="slide2">2</div>
			<div id="slide3">3</div>
			<div id="slide4">4</div>
		</div>
		<div id="list">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
		<div id="left"><左</div>
		<div id="right">右></div>
	</div>
</body>
<script>
	var wrap = document.getElementById('wrap');
	var aList = document.querySelectorAll('#list div');
	var lBtn = document.getElementById('left');
	var rBtn = document.getElementById('right');
	var num = 0;
	var index = 0;
	var timer = null;
	    rBtn.onclick = function(){
	    	clear();
	    	num++;
	    	if(num>3){
	    		num=0;
	    	}
	    	for(var i=0;i<aList.length;i++){
                 aList[i].style.background = 'rgba(80,180,79,0.5)';
                 aList[i].style.color = '#fff';
	    	}
	    	     aList[num].style.background = 'rgba(180,180,180,0.5)';
	    	     aList[num].style.color = '#000';
	    	     wrap.style.left = num * (-600) + 'px';
	    	     autoplay();
	    }
	    lBtn.onclick = function(){
	    	clear();
	    	num--;
	    	if(num<0){
	    		num=3;
	    	}
	    	for(var i=0;i<aList.length;i++){
                 aList[i].style.background = 'rgba(80,180,79,0.5)';
                 aList[i].style.color = '#fff';
	    	}
	    	     aList[num].style.background = 'rgba(180,180,180,0.5)';
	    	     aList[num].style.color = '#000';
	    	     wrap.style.left = num * (-600) + 'px';
	    	     autoplay();
	    }
		function autoplay(){
		timer = setInterval(function(){
			num++;
			if(num>=4){
				num=0;
			};
			for(var i=0;i<aList.length;i++){
				aList[i].style.background = 'rgba(80,180,79,0.5)';
				aList[i].style.color = '#fff';
			}
			    aList[num].style.background = 'rgba(40,80,180,0.5)';
			    aList[num].style.color = '#fff';
			    wrap.style.left = num * (-600) + 'px';
		},5000)
	}
	autoplay();
	function clear(){
		clearInterval(timer);
	}
	// 小按钮的点击事件
	for(var i=0;i<aList.length;i++){
		aList[i].index = i;
		aList[i].onclick = function(){
			for(var i=0;i<aList.length;i++){
				aList[i].style.background = 'pink';
			}
			this.style.background = 'red';
			num = this.index;
			wrap.style.left = this.index * (-600) + 'px';
		}
	}
</script>
</html>


















